
<template>
    <div class="user" id="user" name="user">
        <div class="user-layout">
            <el-row :gutter="10">
                <div>
                    <CenterMenu></CenterMenu>
                </div>
                <el-col :span="20">
                    <div class="user-content">
                        <div class="user-title">
                            <p>我的信息</p>
                        </div>
                        <div class="data-title">
                            <el-form ref="user" :model="user" :rules="rules1" label-width="200px" size="medium">
                                <el-form-item label="新密码" prop="password">
                                    <el-input placeholder="请输入新密码" v-model="user.password" show-password></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="six">
                                    <el-radio v-model="user.six" label="0">男</el-radio>
                                    <el-radio v-model="user.six" label="1">女</el-radio>
                                </el-form-item>
                                <el-form-item label="收货地址" prop="address">
                                    <el-input v-model="user.address" />
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="data-button">
                            <el-button plain type="info" @click="handleSave">取消</el-button>
                            <el-button type="primary" @click="handleSave">保存</el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    import CenterMenu from '@/components/CenterMenu'
    import * as ordersAPI from '@/api/orders'
    export default {
        name: 'User',
        data() {
            return {
                user: {
                    password: '',
                    six: '0',
                    address:''
                },
                rules1: {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    six: [
                        { required: true, message: '请选择性别', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入收货地址', trigger: 'blur' }
                    ]
                },
            }
        },
        methods:{
            postData() {
                console.log(this.user);
            },
        },
        components: {
            CenterMenu
        }
    }
</script>
<style scoped>
    .user-layout {
        max-width: 1225px;
        margin: 0 auto;
    }
    .user-content {
        background-color: #ffffff;
        margin-bottom: 30px;
    }

    .user-title {
        height: 100px;
        display: flex;
        align-items: center;
    }
    .user-title p {
        font-size: 30px;
        color: #757575;
        margin-left: 50px;
    }
    .data-title {
        font-size: 30px;
        height: 200px;
        display: flex;
        float-displace: 150px;
        align-items: center;
    }
    .data-button{
        float-displace: 250px;
        margin: 0 auto;
        text-align: center;
    }

</style>
